<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText"></block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">{{$t('name')}}</view>
				<input name="input" v-model="userInfo.realName" />
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('sex')}}</view>
				<input name="input" v-model="userInfo.sex" />
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('email')}}</view>
				<input name="input" v-model="userInfo.email" />
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('phone')}}</view>
				<input name="input" v-model="userInfo.phoneNumber" />
				<!-- <view class="cu-capsule radius">
					<view class='cu-tag ' :style="{background : themeConfig.primaryColor}">
						+86
					</view>
					<view class="cu-tag " :style="{borderColor : themeConfig.primaryColor}">
						中国大陆
					</view>
				</view> -->
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('address')}}</view>
				<input name="input" v-model="userInfo.address" />
			</view>

			<!-- <view class="cu-form-group">
				<view class="title">{{$t('birthday')}}</view>
				<picker mode="date" :value="date" start="2015-09-01" end="2030-09-01">
					<view class="picker">
						{{userInfo.birthday}}
					</view>
				</picker>
			</view> -->
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('singleLogin')}}</view>
				<switch :class="[themeConfig.theme,userInfo.singleLogin?'checked':'']"
					:checked="userInfo.singleLogin?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('safe')+$t('login')}}</view>
				<switch :class="[themeConfig.theme,userInfo.safeLogin?'checked':'']"
					:checked="userInfo.safeLogin?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view></view>
				<button class="cu-btn shadow text-white"
					:style="{backgroundColor:themeConfig.primaryColor}" @tap="updateUser"
					data-target="menuModal">{{$t('save')}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import * as userApi from '@/api/auth/authUserApi.js'
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.getUser()
		},
		methods: {
			getUser() {
				userApi.getUser({}).then(res => {
					const {
						data
					} = res
					this.userInfo = data
				})
			},
			updateUser() {
				userApi.updateUser({
					...this.userInfo
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.getUser()
					}

				})
			}
		}
	}
</script>

<style scoped>

</style>
